<template>
  <div id="big">
    <div id="top" style="display: flex;">
      <div v-for="(temp, index) in data" :key="index" class="small"
        style="background-color: aquamarine;border-radius: 10%;">
        <div class="sm1">
          {{ temp.type }}
        </div>
        <div class="sm2">
          {{ temp.value }}
        </div>
      </div>
    </div>
    <div id="botton" style="display: flex;">
      <div id="Map">
        <div style="height: 100%;">
          <!-- 提供地图容器  -->
          <div ref="map" style="height: 100%;"></div>
        </div>
      </div>
      <div ref="rightT1" style=" margin:7px;width: 454px;height: 180px;"></div>
      <div ref="rightT2" style=" margin:7px;width: 454px;height: 180px;"></div><br>
      <div ref="rightTB" style=" position: absolute;top: 194px;left: 637px;width: 55%;height: 50%;"></div>
    </div>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';
import { Column } from '@antv/g2plot';
import moment from 'moment';
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 100
      },
      data: [],
      pieData: [],
      columnData: [],
      dualAxesData: [],
    }
  },
  methods: {
    loadDualAxes() {
      const dualAxes = new DualAxes(this.$refs.rightT2, {
        data: [this.dualAxesData, this.dualAxesData],
        xField: 'insert_time',
        yField: ['pm10', 'pm25'],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          },
        ],
      });

      dualAxes.render();

    },
    loadColumn() {
      const columnPlot = new Column(this.$refs.rightTB, {
        data: this.columnData,
        xField: 'type',
        yField: 'value',
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
        columnBackground: {
          style: {
            fill: 'blue',
          },
        },
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          sales: {
            alias: '销售额',
          },
        },
      });

      columnPlot.render();

    },
    loadPie() {
      const piePlot = new Pie(this.$refs.rightT1, {
        appendPadding: 10,
        data: this.pieData,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            },
            content: '设备总数5',
          },
        },
      });

      piePlot.render();

    },
    async getDualAxesData() {
      let res = await get('/dashboard/pageQueryData', this.params);
      let temp = [];
      // 将后端获取的数据设置给tempData 
      res.data.list.forEach((item, index, arr) => {
        // 由于刻度混乱 将第一条数据值设置为15.4 
        arr[0].pm25 = 34;
        arr[0].pm10 = 74;
        // item表示数组每一项 
        item.insert_time = moment(item.insert_time).format("HH:mm");
        // 由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据 
        if (index % 10 == 0) {
          temp.push(arr[index])
        }
      });
      this.dualAxesData = temp;
    },
    async getColumnData() {
      let res = await get('/dashboard/queryEngineerBindDeviceNumber');
      this.columnData = res.data;
    },
    async getPieData() {
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      console.log(res, '888');
      this.pieData = res.data;
    },
    async getData() {
      let res = await get('/count/countAll');
      console.log(res.data, '666');
      this.data = res.data;
    },
    ...mapMutations(['SET_ED']),
    // 封装加载地图函数 
    loadMap() {
      AMapLoader.load({
        key: "ddabbefeec9e1bc78ef33454e278e7ac", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 创建地图图层
          const map = new AMap.Map(this.$refs.map, {
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', //地图模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 17, //初始化地图层级
            rotation: -15, //初始地图顺时针旋转的角度
            zooms: [2, 20], //地图显示的缩放级别范围
            center: [103.76, 36.07], //初始地图中心经纬度
            terrain: true //开启地形图
            // mapStyle: "amap://styles/normal", //设置地图的显示样式
          });
          const traffic = new AMap.TileLayer.Traffic({
            autoRefresh: true, //是否自动刷新，默认为false
            interval: 180, //刷新间隔，默认180s
          });
          map.add(traffic); //通过add方法添加图层
          //异步加载控件
          AMap.plugin(['AMap.ToolBar', 'AMap.HawkEye'], function () {
            var toolbar = new AMap.ToolBar({
              position: 'LB'
            }); //缩放工具条实例化
            map.addControl(toolbar); //添加控件
            // var hawkEye = new AMap.HawkEye();//鹰眼 
            // map.addControl(hawkEye);
          });
          // 遍历设备数组 
          this.deviceData.forEach(item => {
            const marker = new AMap.Marker({
              position: item.position, //[]
              title: item.name,
              // 携带用户自定义数据 
              extData: item
            });
            // 给标记点绑定事件 
            var that = this;
            marker.on('click', function () {
              // this--->指向的是标记点 
              // 获取用户携带自定义数据 
              console.log(this.getExtData());
              that.SET_ED({
                engineer_id: this.getExtData().engineer_id,
                device_id: this.getExtData().id
              })
            })
            map.add(marker);
          })
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    },
    // 封装获取工程设备树
    async getEngData() {
      let res = await get('/dashboard/findEngineerDeviceTree');
      console.log(res, '工程设备树');
      /**
       * 返回的res.data数组 [{id:1,name:"一号工程",children:[{
       *  id:1,
       *  name:"一号设备",
       *  position:[经度,纬度]
       * }]},{},{},{}]
       */
      // 将所有设备信息全部存放在数组中 
      let temp = [];
      res.data.forEach(item => {
        if (item.children.length > 0) {
          item.children.forEach(it => {
            temp.push(it);
          })
        }
      });
      console.log(temp);
      this.deviceData = temp;
    }

  },
  async mounted() {
    await this.getEngData();
    await this.getData();
    await this.getPieData();
    await this.getDualAxesData();
    await this.getColumnData();
    this.loadPie();
    this.loadDualAxes();
    this.loadColumn();
    this.loadMap();
  },

}
</script>

<style lang="scss" scoped>
#big>#botton {
  position: relative;
}

#big>#top>.small {
  width: 307.667px;
  height: 120px;
  padding: 14px;
  margin-right: 7px;
}

#big>#top>.small>.sm1 {
  width: 248.467px;
  height: 54px;
}

#big>#top {
  margin-bottom: 40px;
  margin-top: 30px;
}

#big>#top>.small>.sm2 {
  width: 248.467px;
  height: 16.1px;
}

#big>#botton>#Map {
  margin-right: 7px;
  background-color: red;
  width: 623px;
  height: 400px;
}
</style>
